<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap-table.css">
    <script src="../js/jquery-3.4.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/bootstrap-table.min.js"></script>
</head>
<body>
<table id="table"
       data-detail-view="true">
    <thead>
    <tr>
        <th data-field="id">ID</th>
        <th data-field="name">Item Name</th>
        <th data-field="price">Item Price</th>
    </tr>
    </thead>
</table>

<script>
  var $table = $('#table')

  function buildTable($el, cells, rows) {
    var i; var j; var row
    var columns = []
    var data = []

    for (i = 0; i < cells; i++) {
      columns.push({
        field: 'field' + i,
        title: 'Cell' + i,
        sortable: true
      })
    }
    for (i = 0; i < rows; i++) {
      row = {}
      for (j = 0; j < cells; j++) {
        row['field' + j] = 'Row-' + i + '-' + j
      }
      data.push(row)
    }
    $el.bootstrapTable({
      columns: columns,
      data: data,
      detailView: cells > 1,
      onExpandRow: function (index, row, $detail) {
        /* eslint no-use-before-define: ["error", { "functions": false }]*/
        expandTable($detail, cells - 1)
      }
    })
  }

  function expandTable($detail, cells) {
    buildTable($detail.html('<table></table>').find('table'), cells, 1)
  }

  $(function() {
    buildTable($table, 8, 1)
  })
</script>
</body>
</html>
